import React from 'react'
import classNames from 'classnames'
import { useDispatch, useSelector } from 'react-redux'
import { decrement, increment, add } from '../store/modules/shoppingCartStore'
export default function ShoppingCart() {
  const { count } = useSelector((state) => state.shoppingCart)
  const dispatch = useDispatch()
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button
        className={classNames('text-red-300', 'mx-2')}
        onClick={() => dispatch(add(10))}
      >
        +10
      </button>
      <span className={classNames(count === 21 && 'text-red-500', 'mx-2')}>
        {count}
      </span>
    </div>
  )
}
